<template>
  <div>
    <h3>门店列表----New</h3>
    <div>
      <input
        type="button"
        value="批量删除"
        class="btn btn-danger"
        @click="delAll"
      />
      <input
        type="button"
        value="批量上架"
        class="btn btn-danger"
        @click="updateState(1)"
      />
      <input
        type="button"
        value="批量下架"
        class="btn btn-danger"
        @click="updateState(0)"
      />
    </div>
    <table class="table table-bordered">
      <tbody>
        <tr class="bg-primary">
          <td><input type="checkbox" v-model="checked" @click="checkAll" /></td>
          <td>Id</td>
          <td>门店名称</td>
          <td>分店名称</td>
          <td>门店图片</td>
          <td>开业时间</td>
          <td>酒店状态</td>
          <td>酒店特色</td>
          <td>门店介绍</td>
          <td>门店地址</td>
          <td>门店类型</td>
          <td>操作</td>
        </tr>
        <tr v-for="item in data.list" :key="item.Id">
          <td>
            <input
              type="checkbox"
              v-model="ids"
              :value="item.Id"
              @change="checkOne"
            />
          </td>
          <td>{{ item.Id }}</td>
          <td>{{ item.ShopName }}</td>
          <td>{{ item.BranchName }}</td>
          <td><img :src="item.Photo" width="100" height="100" /></td>
          <td>{{ moment(item.OpenTime).format('YYYY-MM-DD') }}</td>
          <td>{{ item.State == 1 ? '上架' : '下架' }}</td>
          <td>{{ item.TeSe }}</td>
          <td>{{ item.Desc }}</td>
          <td>{{ item.AddressName }}</td>
          <td>{{ item.Type }}</td>
          <td>
            <input
              type="button"
              value="修改"
              class="btn btn-primary"
              @click="update(item.Id)"
            />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
//---------------------------数据------------------------------
//声明一个变量存储获取列表向后端传递的数据
let info: any = reactive({
  pageIndex: 1, //页码
  pageSize: 3, //页容量
  shopName: '',
  shopAddress: '',
});

//声明一个变量接受后端返回的数据
let data: any = reactive({
  list: [],
  totalCount: 0, //总条数
  totalPage: 0, //总页数
});

//门店地址列表
let addressList: any = ref([]);

//声明一个变量控制单个复框选中与未选中
let checked: any = ref(false);

//声明一个变量控制多个复选框选中与未选中
let ids: any = ref([]);

//-------------------------生命周期---------------
onMounted(() => {
  getShopList();
  getAddressList();
});

//-------------------------函数---------------

//批量上下架
const updateState = (state: any) => {
  //1.友好提示
  if (ids.value.length == 0) {
    alert('必选一项');
    return;
  }
  let f = confirm('请问您确定要修改吗？');
  if (f) {
    //2.发送网络请求
    axios({
      url: '/api/Houses/UpdateStateAll',
      method: 'put',
      params: {
        ids: ids.value.toString(),
        state: state,
      },
    })
      .then((res) => {
        console.log(res);
        if (res.data > 0) {
          alert('修改成功');
          checked.value = false;
          ids.value = [];
          getShopList();
        } else {
          alert('修改失败');
          checked.value = false;
          ids.value = [];
          return;
        }
      })
      .catch((err) => {
        console.log(err);
      });
    //3.刷新列表
  }
};

//批量删除
const delAll = () => {
  //1.友好提示（1、必选一项  2.是否删除）
  if (ids.value.length == 0) {
    alert('必选一项');
    return;
  }
  let f = confirm('请问您确定要删除吗？');
  if (f) {
    //2.发送网络请求
    axios({
      url: '/api/Houses/DelShopModel',
      method: 'delete',
      params: {
        ids: ids.value.toString(),
      },
    })
      .then((res) => {
        console.log(res);
        if (res.data > 0) {
          alert('删除成功');
          //3.刷新列表
          getShopList();
          checked.value = false;
        } else {
          alert('删除失败');
          checked.value = false;
          return;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
};
//选中一个
const checkOne = () => {
  //改变单个复选框时候 让上面的控制全选与全不选的框变化  思路：ids的长度和data.list的长度比较
  if (ids.value.length == data.list.length) {
    checked.value = true;
  } else {
    checked.value = false;
  }
};

//全选与全不选
const checkAll = () => {
  checked.value = !checked.value;
  if (checked.value == true) {
    //选中时 让当前列表中id全部都放到ids中  循环data.list循环这个变量
    ids.value = data.list.map((item: any) => {
      return item.Id;
    });
  } else {
    //没有选中，ids为空数组
    ids.value = [];
  }
};

//门店修改
//1.跳转并且要传参 传参：路由传参  query传参
const update = (id: any) => {
  router.push({
    path: '/shopUpdateNew', //跳转修改页面跳 自定义一个修改路径  然后根据修改路径创建视图  配置路由规则
    query: {
      id: id,
    },
  });
};

//获取门店列
const getShopList = () => {
  axios({
    url: '/api/Shops/GetShopList',
    method: 'get',
    params: info,
  })
    .then((res) => {
      console.log(res);
      Object.assign(data, res.data);
    })
    .catch((err) => {
      console.log(err);
    });
};

//2.读取数据列表(地址)

const getAddressList = () => {
  axios({
    url: '/api/Shops/GetAddRessList',
    method: 'get',
  })
    .then((res) => {
      console.log(res);
      addressList.value = res.data;
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped></style>
